////////////////////////////////////////////
// 这里实现标签页的切换 friend 和 communication
////////////////////////////////////////////
// 文件类型图标映射
const fileIcons = {
    'pdf': '📄',
    'doc': '📄',
    'docx': '📄',
    'txt': '📄',
    'mp4': '🎬',
    'avi': '🎬',
    'mov': '🎬',
    'mp3': '🎵',
    'wav': '🎵',
    'zip': '📦',
    'rar': '📦',
    'xls': '📊',
    'xlsx': '📊',
    'ppt': '📊',
    'pptx': '📊',
    'jpg': '🖼️',
    'jpeg': '🖼️',
    'png': '🖼️',
    'gif': '🖼️'
};
const cover1 = document.querySelector('.cover');

// 显示通知
function setShowNotification(message, type = 'success') {
    $('#set-notificationText').text(message);
    $(`#set-notification`).removeClass().addClass('set-notification ' + type);
    $("#set-notification").addClass('show');
    setTimeout(function () {
        $('#set-notification').removeClass('show');
    }, 3000);
}

function getOnlineUser() {
    $.ajax({
        url: "chat/getOlineUser",
        type: "post",
        success: function (result) {
            let data = result.data;
            if (data.status == "fail") {
                setShowNotification("请求错误：", data.msg);
                return;
            }

            let ids = data.msg;

            let friendsList = document.querySelector("#friend-list");

            const onlineFriends = [];
            let friends = document.querySelectorAll(".friend-item");
            // 找到在线的人 并放到了onlineFriends中
            for(let friend of friends){
                let friendId = +friend.getAttribute("friendId");

                if (ids.includes(friendId)) {
                    friend.querySelector(".online-indicator").style.display = "flex";
                    onlineFriends.push(friend);
                } else {
                    friend.querySelector(".online-indicator").style.display = "none";
                }
            }

            //调整onlineFriends中的人的位置
            for (let i = onlineFriends.length - 1; i >= 0; i--) {
                const friend = onlineFriends[i];

                // 如果容器不为空，插入到第一个元素之前
                if (friendsList.children.length > 0) {
                    friendsList.insertBefore(friend, friendsList.children[1]);
                }
            }
        },
    });
}

function initSwitchTab() {
    // 1. 先获取到相关的元素(标签页的按钮, 会话列表, 好友列表)
    let tabSession = document.querySelector('.tab .tab-session');

    let tabFriend = document.querySelector('.tab .tab-friend');

    // querySelectorAll 可以同时选中多个元素. 得到的结果是个数组
    // [0] 就是会话列表
    // [1] 就是好友列表
    let lists = document.querySelectorAll('.list');

    // 2. 针对标签页按钮, 注册点击事件.
    //    如果是点击 会话标签按钮, 就把会话标签按钮的背景图片进行设置.
    //    同时把会话列表显示出来, 把好友列表隐藏
    //    如果是点击 好友标签按钮, 就把好友标签按钮的背景图片进行设置.
    //    同时把好友列表显示出来, 把会话列表进行隐藏
    tabSession.onclick = function () {
        // a) 设置图标
        tabSession.style.backgroundImage = 'url(img/对话.png)';
        tabFriend.style.backgroundImage = 'url(img/用户2.png)';
        // b) 让会话列表显示出来, 让好友列表进行隐藏
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    tabFriend.onclick = function () {
        // a) 设置图标
        tabSession.style.backgroundImage = 'url(img/对话2.png)';
        tabFriend.style.backgroundImage = 'url(img/用户.png)';
        // b) 让会话列表显示出来, 让好友列表进行隐藏
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';

        //这里获取到上线的人
        getOnlineUser();
    }
}

initSwitchTab();

/////////////////////////////////////////////////////
// 从服务器获取到用户登录数据 初始数据的加载
/////////////////////////////////////////////////////
function getUserInfo() {

    $.ajax({
        type: 'get',
        url: 'chat/userInfo' + location.search,
        success: function (body) {
            let data = body.data;
            if (data.status == "fail") {
                setShowNotification(data.msg);
                return;
            }
            // 从服务器获取到数据.
            console.log("name=" + data.userName);
            console.log("id" + data.userId);
            // 校验结果是否有效.
            if (data.userId && data.userId > 0) {

                // 如果结果有效, 则把用户名显示到界面上.
                localStorage.setItem("userName", data.userName);
                localStorage.setItem("userId", data.userId);
                localStorage.setItem("email", data.email);
                localStorage.setItem("sign", data.sign);
                localStorage.setItem("headPortrait", data.headPortrait);
                let url = data.backgroundUrl;

                let i = url.indexOf("-");

                let blur = url.slice(0, i);
                let img = url.slice(i + 1);

                localStorage.setItem("backgroundUrl", img);

                img = "/chat-background/" + img;

                console.log("img= " + img + " blur= " + blur);

                cover1.style.backgroundImage = `url('${img}')`;

                cover1.style.filter = `blur(${blur}px)`;

                //渲染用户消息
                if (data.headPortrait != null) {
                    $("#user-info-img").attr("src", "/head-portrait/" + data.headPortrait);
                }
                $(".user-info-name").text(data.userName);
                // 使用.html()保留图标
                $(".user-info-uid").html('<i class="fas fa-id-card"></i> UID: ' + data.userId);
                if (data.sign != null) {
                    $(".user-info-signature").text(data.sign);
                }

                // 同时也可以记录 userId 到 html 标签的属性中. (以备后用)
                // let userDiv = document.querySelector('.main .left .user');
                // userDiv.innerHTML = data.userName +"  url: "+data.userId;
                // userDiv.setAttribute("user-id", data.userId);
            } else {
                // 如果结果无效, 当前未登录! 则跳转到登录页面.
                location.assign('login.html');
            }
        },
        error: function (err) {
            if (err.status == 406) {

                location.href = "login.html";
                return;
            }
            console.log(result.message);
        }
    });
}

getUserInfo();

// 获取到好友列表
function getFriendList() {
    $.ajax({
        type: 'get',
        url: 'chat/friendList' + location.search,
        async: false,
        success: function (body) {
            // 1. 先把之前的好友列表的内容, 给清空
            let friendListUL = document.querySelector('#friend-list');


            friendListUL.innerHTML = '  <div class="add-friend-container">\n' +
                '                    <button class="add-friend-btn" id="add-friend-btn">\n' +
                '                        <i class="fas fa-user-plus"></i> 添加好友\n' +
                '                    </button>\n' +
                '                </div>';

            const addFriendBtn = document.getElementById('add-friend-btn');
            const addFriendModal = document.getElementById('add-friend-modal');
            const friendIdInput = document.getElementById('add-friend-id');

            addFriendBtn.addEventListener('click', function () {
                addFriendModal.classList.add('active');
                friendIdInput.focus();
            });

            // 2. 遍历 body, 把服务器响应的结果, 加回到当前的 friend-list 中.
            let data = body.data;
            //friend portrait username userId sign
            for (let friend of data) {
                let friendItem = document.createElement("div");
                friendItem.className = "friend-item";
                friendItem.setAttribute("friendId", friend.friendId);

                let imgContainer = document.createElement("div");
                imgContainer.className = "user-info-online-avatar";

                let img = document.createElement("img");
                img.src = "/head-portrait/" + friend.headPortrait;
                img.className = "user-info-avatar user-info-avatar-sm user-info-avatar-left user-info-online-avatar online";

                let onlineIndicator = document.createElement("div");
                onlineIndicator.className = "online-indicator";

                imgContainer.appendChild(img);
                imgContainer.appendChild(onlineIndicator);

                // let friendAvatar = document.createElement("div");
                // friendAvatar.className = "friend-avatar";
                // friendAvatar.append(friend.userName.charAt(0));

                let friendInfo = document.createElement("div");
                friendInfo.className = "friend-info";

                let friendName = document.createElement("div");
                friendName.className = "friend-name";
                friendName.append(friend.userName);

                let friendUrl = document.createElement("div");
                friendUrl.className = "friend-url"
                friendUrl.innerHTML = '<i class="fas fa-id-card"></i> UID: ' + friend.friendId;

                let friendSignature = document.createElement("friend-signature");
                friendSignature.className = "friend-signature";

                let flg =  friend.sign.length > 10;
                let content = friend.sign.substring(0, 11);
                if(flg){
                    content += "...";
                }

                friendSignature.append(content);


                friendInfo.appendChild(friendName);
                friendInfo.appendChild(friendUrl);
                friendInfo.appendChild(friendSignature);

                friendItem.appendChild(imgContainer);
                friendItem.appendChild(friendInfo);

                friendItem.onclick = function () {
                    clickFriend(friend);
                };

                friendListUL.appendChild(friendItem);
            }


        },
        error: function (err) {
            if (err.status == 406) {

                location.href = "login.html";
                return;
            }
            console.log(result.message);
        }
    });
}

getFriendList();

//获取到最近的聊天记录显示左边的聊天框下面  渲染聊天拦
function friendSessionList(clickFlag = -1) {

    $.ajax({
        type: 'get',
        url: 'chat/friendSessionList' + location.search,
        async: false,
        success: function (body) {
            if (!body.success) {
                console.log("请求错误: " + body.message);
                return;
            }

            // 1. 清空之前的会话列表
            let sessionListUL = document.querySelector('#session-list');
            sessionListUL.innerHTML = '';
            // 2. 遍历响应的数组, 针对结果来构造页面
            let data = body.data;
            for (let session of data) {
                // 针对 lastMessage 的长度进行截断处理
                if (session.content.length > 10) {
                    session.content = session.content.substring(0, 10) + '...';
                }

                let li = document.createElement('li');
                // 把会话 id 保存到 li 标签的自定义属性中.
                li.setAttribute('message-session-id', session.id);
                li.setAttribute('headPortrait', session.headPortrait);

                let content = session.content;

                if (content.indexOf("#{video}") != -1) {
                    content = "[视频]";
                } else if (content.indexOf("#{picture}") != -1) {
                    content = "[图片]";
                } else if (content.indexOf("#{document}") != -1) {
                    content = "[文档]";
                } else if (content.indexOf("#{others}") != -1) {
                    content = "[文件]";
                }

                li.innerHTML = '<img src="' + '/head-portrait/' + session.headPortrait + '" class="user-info-avatar user-info-avatar-sm user-info-avatar-left">'
                    + '<div class="text-content">'
                    + '<h3>' + session.userName + '</h3>'
                    + '<p>' + content + '</p>'
                    + '</div>';

                if (session.friendId == clickFlag) {
                    sessionListUL.prepend(li);
                } else {
                    sessionListUL.appendChild(li);
                }

                // 给 li 标签新增点击事件
                li.onclick = function () {
                    // 这个写法, 就能保证, 点击哪个 li 标签
                    // 此处对应的 clickSession 函数的参数就能拿到哪个 li 标签.
                    clickSession(li);
                }
            }

            if (clickFlag !== -1){
                // //选择刚刚添加的朋友的对话窗口
                let targetLi = document.querySelector(
                    '#session-list li[message-session-id="' + clickFlag + '"]'
                );
                if (targetLi) {
                    // 触发点击
                    targetLi.click();
                }
            }
        },
        error: function (err) {
            if (err.status == 406) {

                location.href = "login.html";
                return;
            }
            console.log(result.message);
        }
    });

}

friendSessionList();

function clickSession(currentLi) {
    //实现了点击之后的高亮切换
    $(".selected").removeClass("selected");

    currentLi.classList.add("selected");

    // // 1. 设置高亮
    // let allLis = document.querySelectorAll('#session-list>li');
    // activeSession(allLis, currentLi);
    // 2. 获取指定会话的历史消息
    let sessionId = currentLi.getAttribute("message-session-id");

    getHistoryMessage(sessionId);
}

// 这个函数负责获取指定会话的历史消息.
function getHistoryMessage(sessionId) {

    console.log("获取历史消息 sessionId=" + sessionId);

    // 1. 先清空右侧列表中的已有内容
    let titleDiv = document.querySelector('body > div.client-container > div.main > div.right > div.title');
    titleDiv.innerHTML = '';

    let messageDiv = document.querySelector('#chatContainer');
    messageDiv.innerHTML = '';

    // 2. 重新设置会话的标题. 新的会话标题是点击的那个会话上面显示的标题
    //    先找到当前选中的会话是哪个. 被选中的会话带有 selected 类的.
    let selectedH3 = document.querySelector('#session-list .selected .text-content>h3');
    if (selectedH3) {
        // selectedH3 可能不存在的. 比如页面加载阶段, 可能并没有哪个会话被选中.
        // 也就没有会话带有 selected 标签. 此时就无法查询出这个 selectedH3
        titleDiv.innerHTML = selectedH3.innerHTML;
    }

    // 3. 发送 ajax 请求给服务器, 获取到该会话的历史消息.
    $.ajax({
        type: 'get',
        url: 'chat/getHistoryMessage?sessionId=' + sessionId,
        success: function (body) {
            if (!body.success) {
                console.log("请求错误: " + body.message);
                return;
            }

            // 此处返回的 body 是个 js 对象数组, 里面的每个元素都是一条消息.
            // 直接遍历即可.
            let data = body.data;

            //渲染历史消息
            let userId = localStorage.getItem("userId");

            for (let message of data) {
                addMessage(message.content, message.userId == userId);
            }

            // 加个操作: 在构造好消息列表之后, 控制滚动条, 自动滚动到最下方.
            // scrollBottom(messageShowDiv);
        },

        error: function (err) {
            if (err.status == 406) {

                location.href = "login.html";
                return;
            }
            console.log(result.message);
        }
    });
}

// 添加消息到聊天窗口
// #{video}xxx.video
// string boolean
function addMessage(content, isUser) {
    let messageDiv = document.createElement('div');
    messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;

    // 添加头像
    let headPortrait = document.createElement("img");

    if (!isUser) {
        let v = document.querySelector("li.selected");
        headPortrait.src = "/head-portrait/" + v.getAttribute("headPortrait");
        headPortrait.className = "user-info-avatar user-info-avatar-sm user-info-avatar-left";
        messageDiv.appendChild(headPortrait);
    }

    let contentDiv = document.createElement('div');
    contentDiv.className = 'message-content';

    let videoDiv = document.createElement('div');
    videoDiv.className = "video-preview";

    let picDiv = document.createElement('div');
    picDiv.className = "image-content";
    picDiv.id = "image-content";


    if (content.indexOf("#{video}") != -1) {
        //视频
        let video = document.createElement('video');

        video.controls = true;

        let source = document.createElement('source')

        let name = content.slice(8);
        source.src = "/chat-video/" + name;

        video.appendChild(source);

        videoDiv.appendChild(video);

        messageDiv.appendChild(videoDiv);
    } else if (content.indexOf("#{picture}") != -1) {
        //图片
        let name = content.slice(10);
        let url = "/chat-picture/" + name;
        console.log(url);

        let img = document.createElement('img');
        img.src = url;
        img.className = "image-preview";
        img.id = "image-preview";
        img.alt = "加载失败";
        // img.onclick(function () {
        //     console.log("下载文件" + "" + url + " name =" + name);
        //     downloadFile(url, name);
        // });

        picDiv.appendChild(img);

        messageDiv.appendChild(picDiv);
    } else if (content.indexOf("#{document}") != -1 || content.indexOf("#{others}") != -1) {
        //文件
        let name = content.slice(11);
        let suffix = content.slice(content.lastIndexOf(".") + 1);

        let fileItem = document.createElement("div");
        fileItem.setAttribute("data-file", name);
        fileItem.setAttribute("data-type", suffix);

        let fileIco = document.createElement("file-icon");

        fileIco.append(fileIcons[suffix] || '📄');

        let fileInfo = document.createElement("file-info");
        let fileName = document.createElement("file-name");

        //添加点击下载的行为
        fileName.onclick = function () {
            let b = confirm("是否下载文件");
            if (b) {
                downloadFile("/chat-document/" + name, name);
            }
        };

        fileName.append(name);

        fileInfo.appendChild(fileName);

        fileItem.appendChild(fileIco);
        fileItem.appendChild(fileInfo);

        contentDiv.appendChild(fileItem);
        messageDiv.appendChild(contentDiv);
    } else if (content) {
        let textDiv = document.createElement('div');
        textDiv.textContent = content;
        contentDiv.appendChild(textDiv);

        messageDiv.appendChild(contentDiv);
    }

    chatContainer.appendChild(messageDiv);

    if (isUser) {
        headPortrait.src = "/head-portrait/" + localStorage.getItem("headPortrait");
        headPortrait.className = "user-info-avatar user-info-avatar-sm user-info-avatar-right";
        messageDiv.appendChild(headPortrait);
    }
    // 滚动到底部
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

//下载文件
function downloadFile(url, fileName) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
        if (xhr.status === 200) {
            let blob = new Blob([xhr.response], {type: 'application/octet-stream'});
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
        }
    };
    xhr.send();
}

// 清空输入
function clearInput() {
    inputBox.innerHTML = '';
    state.files = [];
    filePreviews.innerHTML = '';
}

// 把 messageShowDiv 里的内容滚动到底部.
function scrollBottom(elem) {
    // 1. 获取到可视区域的高度
    let clientHeight = elem.offsetHeight;
    // 2. 获取到内容的总高度
    let scrollHeight = elem.scrollHeight;
    // 3. 进行滚动操作, 第一个参数是水平方向滚动的尺寸. 第二个参数是垂直方向滚动的尺寸
    elem.scrollTo(0, scrollHeight - clientHeight);
}

// 点击好友列表项, 触发的函数
function clickFriend(friend) {
    // 1. 先判定一下当前这个好友是否有对应的会话.
    //    使用一个单独的函数来实现. 这个函数参数是用户的名字. 返回值是一个 li 标签. 找到了就是返回了对应会话列表里的 li; 如果没找到, 返回 null
    let sessionLi = findSessionByName(friend.userName);
    let sessionListUL = document.querySelector('#session-list');
    if (sessionLi) {
        // 2. 如果存在匹配的结果, 就把这个会话设置成选中状态, 获取历史消息, 并且置顶.
        //    insertBefore 把这个找到的 li 标签放到最前面去.
        // sessionListUL.insertBefore(sessionLi, sessionListUL.content);
        //    此处设置会话选中状态, 获取历史消息, 这俩功能其实在上面的 clickSession 中已经有了.
        //    此处直接调用 clickSession 即可
        //    clickSession(sessionLi);
        //    或者还可以模拟一下点击操作.
        sessionLi.click();
    } else {
        // 3. 如果不存在匹配的结果, 就创建个新会话(创建 li 标签 + 通知服务器)
        sessionLi = document.createElement('li');
        //    构造 li 标签内容. 由于新会话没有 "最后一条消息", p 标签内容就设为空即可
        sessionLi.innerHTML = '<h3>' + friend.userName + '</h3>' + '<p></p>';
        //    把标签进行置顶
        // sessionListUL.insertBefore(sessionLi, sessionListUL.content);
        sessionLi.onclick = function () {
            clickSession(sessionLi);
        };

        sessionLi.click();
        //     发送消息给服务器, 告诉服务器当前新创建的会话是啥样的.
        createSession(friend.userName, sessionLi);
    }
    // 4. 还需要把标签页给切换到 会话列表.
    //    实现方式很容易, 只要找到会话列表标签页按钮, 模拟一个点击操作即可.
    let tabSession = document.querySelector('.tab .tab-session');

    tabSession.click();
}

function findSessionByName(username) {
    // 先获取到会话列表中所有的 li 标签
    // 然后依次遍历, 看看这些 li 标签谁的名字和要查找的名字一致.
    let sessionLis = document.querySelectorAll('#session-list>li');
    for (let sessionLi of sessionLis) {
        // 获取到该 li 标签里的 h3 标签, 进一步得到名字
        let h3 = sessionLi.querySelector('h3');
        if (h3.innerHTML == username) {
            return sessionLi;
        }
    }
    return null;
}

let websocket = new WebSocket("wss://" + location.host + "/WebSocketMessage");

/**
 * 实现 消息的发送
 */
// 创建 websocket 实例
// let websocket = new WebSocket("ws://127.0.0.1:8080/WebSocketMessage")
// 连接断开才建立连接
function createWebsocket() {
    if (websocket.readyState !== WebSocket.OPEN) {
        setShowNotification("重新建立连接成功")
        websocket = new WebSocket("wss://" + location.host + "/WebSocketMessage");
    }
}

websocket.onopen = function () {
    console.log("websocket 连接成功!");
}

/**
 *   //类型
 *     String type;
 *     //请求人
 *     UserInfo sendUser;
 *     //添加信息
 *     String content;
 *
 *
 *     UserInfo:
 *     Integer userId = 0;
 *     String userName = "";
 *     String password = "";
 *     String sign;
 *     String email;
 *     headPortrait;
 */
function romanceAddFriendReq(data) {
    let content = data.content;
    let friendInfo = data.sendUser;
    let append = {
        id: friendInfo.userId,
        name: friendInfo.userName,
        headPortrait: "/head-portrait/" + friendInfo.headPortrait,
        message: content
    };

    renderFriendRequests(append);

    updateBadgeCount();

}

//将请求好友请求显示
function handleAddFriend(resp) {
    let friendListUL = document.querySelector('#friend-list');
    let data = resp.data;

    romanceAddFriendReq(data);

    // li.innerHTML += '<h4>' + data.sendUser.userName + '</h4>';
    // li.innerHTML += '<p>' + data.content + '</p>';
    // // tmd 静态添加的按钮需要自己价格事件的监视
    // li.innerHTML += '<button class="agree">' + "同意" + '</button>';
    // li.innerHTML += '<button class="refuse">' + "拒绝" + '</button>';
    // // 此处把 friendId 也记录下来, 以备后用.
    // // 把 friendId 作为一个 html 的自定义属性, 加到 li 标签上就行了.
    // li.setAttribute('friend-id', data.sendUser.userId);
    // li.setAttribute('class', "friend-request");
    // friendListUL.appendChild(li);
}


//同意后的行为
function agreeRequest(friendId) {
    if (friendId == "") {
        return;
    }
    console.log("朋友id " + friendId);
    let userId = localStorage.getItem("userId");

    $.ajax({
        type: 'post',
        url: 'chat/addFriends',
        contentType: "application/json",
        data: JSON.stringify({
            userId: userId,
            friendId: friendId
        }),
        success: function (body) {
            let data = body.data;
            if (data.status == "fail") {
                setShowNotification(data.msg);
            }
            $(".tab .tab-session").click();
        },
        error: function (err) {
            if (err.status == 406) {

                location.href = "login.html";
                return;
            }
            console.log(result.message);
        }
    });
}


websocket.onmessage = function (e) {
    console.log("websocket 收到消息! " + e.data);
    // 此时收到的 e.data 是个 json 字符串, 需要转成 js 对象
    let resp = JSON.parse(e.data);
    if (resp.data.type == 'message') {
        // 处理消息响应
        handleMessage(resp.data);
    } else if (resp.data.type == 'addFriend') {
        console.log(resp);
        handleAddFriend(resp);
    } else if (resp.data.type == 'addFriendAgree') {
        //同意了请求重新获取下friend
        getFriendList();
        friendSessionList();
    } else if(resp.data.type == 'log-off'){
        //移除cookie
        deleteCookie("jwt-token");
    }
    else {
        // resp 的 type 出错!
        console.log("resp.type 不符合要求!");
    }
}
// 删除cookie
function deleteCookie(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
    console.log("删除cookie");
    alert("账号在其他地方登录")
    location.assign("login.html");
}

websocket.onclose = function (ev) {
    let code = ev.code;
    if (code == 1003) {
        alert("其他地方正在登录该账号")
        location.href = "login.html";
    }
    console.log("websocket 连接关闭!");
};

websocket.onerror = function (ev) {
    let code = ev.code;
    if (code == 1003) {
        location.href = "login.html";
    }
    console.log("websocket 连接异常!");
};


$(".right .ctrl").click(function () {

    let messageInput = document.getElementById('message-input');
    let msg = messageInput.value.trim();
    if (msg == "") {
        return;
    }
    sendMsg(msg);
});

//发送消息
function sendMsg(msg) {
    let v = document.querySelector("li.selected");

    if (v == null) {
        setShowNotification("未选择对话栏");
        return;
    }

    //如果连接关闭自动重连
    if (websocket.readyState !== WebSocket.OPEN) {
        console.log("发送消息时重新建立连接成功")
        websocket = new WebSocket("wss://" + location.host + "/WebSocketMessage");
    }

    let req = {
        type: 'message',
        userId: localStorage.getItem("userId"),
        userName: localStorage.getItem("userName"),
        sessionId: v.getAttribute("message-session-id"),
        content: msg
    };
    req = JSON.stringify(req);
    console.log("[websocket] send: " + req);
    // d) 通过 websocket 发送消息
    if (websocket.readyState !== WebSocket.OPEN) {
        setShowNotification("与服务器的连接断开 刷新哈");
        return;
    }
    websocket.send(req);
}

//发送文件
function sendFile(files) {
    //发送人消息
    let v = document.querySelector("li.selected");

    let sender = {
        type: 'message',
        userId: localStorage.getItem("userId"),
        userName: localStorage.getItem("userName"),
        sessionId: v.getAttribute("message-session-id"),
        content: ""
    };

    let formData = new FormData();

    formData.append("sender", JSON.stringify(sender));
    files.forEach(file =>
        formData.append("files", file)
    );
    $.ajax({
        url: "save/files",
        type: "POST",
        contentType: false,
        processData: false,
        data: formData,
        success: function (result) {
            console.log(result);
        },

        error: function (err) {
            if (err.status == 406) {
                location.href = "login.html";
                return;
            }
            console.log(result.message);
        }
    });
}

function handleMessage(resp) {
    // 把客户端收到的消息, 给展示出来.
    // 展示到对应的会话预览区域, 以及右侧消息列表中.

    // 1. 根据响应中的 sessionId 获取到当前会话对应的 li 标签.
    //    如果 li 标签不存在, 则创建一个新的
    let curSessionLi = findSessionLi(resp.sessionId);
    if (curSessionLi == null) {
        // 就需要创建出一个新的 li 标签, 表示新会话.
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message-session-id', resp.sessionId);
        // 此处 p 标签内部应该放消息的预览内容. 一会后面统一完成, 这里先置空
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>'
            + '<p></p>';
        // 给这个 li 标签也加上点击事件的处理
        curSessionLi.onclick = function () {
            clickSession(curSessionLi);
        }
    }
    // 2. 把新的消息, 显示到会话的预览区域 (li 标签里的 p 标签中)
    //    如果消息太长, 就需要进行截断.
    let p = curSessionLi.querySelector('p');
    let content = resp.content;

    console.log("左边小框 " + content);

    if (content.indexOf("#{video}") != -1) {
        content = "[视频]";
    } else if (content.indexOf("#{picture}") != -1) {
        content = "[图片]";
    } else if (content.indexOf("#{document}") != -1) {
        content = "[文档]";
    } else if (content.indexOf("#{others}") != -1) {
        content = "[文件]";
    }

    p.innerHTML = content;
    if (p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0, 10) + '...';
    }
    // 3. 把收到消息的会话, 给放到会话列表最上面.
    let sessionListUL = document.querySelector('#session-list');
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
    // 4. 如果当前收到消息的会话处于被选中状态, 则把当前的消息给放到右侧消息列表中.
    //    新增消息的同时, 注意调整滚动条的位置, 保证新消息虽然在底部, 但是能够被用户直接看到.
    if (curSessionLi.className == 'selected') {
        // 把消息列表添加一个新消息.
        // let messageShowDiv = document.querySelector('.right .message-show');
        let userId = localStorage.getItem("userId");

        addMessage(resp.content, resp.userId == userId);

        clearInput()
        // $(".right .message-input").val("");
        // scrollBottom(messageShowDiv);
    }
    // 其他操作, 还可以在会话窗口上给个提示 (红色的数字, 有几条消息未读), 还可以播放个提示音.
    // 这些操作都是纯前端的. 实现也不难, 不是咱们的重点工作. 暂时不做了.
}

function findSessionLi(targetSessionId) {
    // 获取到所有的会话列表中的 li 标签
    let sessionLis = document.querySelectorAll('#session-list li');
    for (let li of sessionLis) {
        let sessionId = li.getAttribute('message-session-id');
        if (sessionId == targetSessionId) {
            return li;
        }
    }
    // 啥时候会触发这个操作, 就比如如果当前新的用户直接给当前用户发送消息, 此时没存在现成的 li 标签
    return null;
}

// 显示右键自定义菜单
function showCustomMenu(event, id, type) {

    // 创建自定义菜单
    let menu = document.createElement('div');
    menu.className = 'custom-menu';

    // 根据点击位置定位菜单
    menu.style.left = `${event.clientX}px`;
    menu.style.top = `${event.clientY}px`;
    menu.style.zIndex = `4`;


    if (type == "delMsg") {
        // 菜单选项
        let options = [
            {
                text: '删除', action: () => {
                    delMsg(id);
                    $(".selected").click();
                }
            },
        ];
        // 动态添加菜单项
        options.forEach(opt => {
            let item = document.createElement('div');
            item.className = 'custom-menu-item';
            item.textContent = opt.text;
            item.onclick = () => {
                opt.action();
                menu.remove();
            };
            menu.appendChild(item);
        });

        // 将菜单添加到页面
        let add = document.querySelector(".message-show");
        add.appendChild(menu);
    } else if (type == "delFriend") {
        // 菜单选项
        let options = [
            {
                text: '删除', action: () => {
                    delFriend(id);
                    //移除会话和friend
                    let liFriend = document.querySelector('li[friend-id="' + id + '"]');
                    liFriend.remove();
                    let liSession = document.querySelector('li[message-session-id="' + id + '"]');
                    liSession.remove();
                }
            },
        ];
        // 动态添加菜单项
        options.forEach(opt => {
            let item = document.createElement('div');
            item.className = 'custom-menu-item';
            item.textContent = opt.text;
            item.onclick = () => {
                opt.action();
                menu.remove();
            };
            menu.appendChild(item);
        });

        // 将菜单添加到页面
        let add = document.querySelector("#friend-list");
        add.appendChild(menu);
    }

    // 点击其他地方关闭菜单
    document.addEventListener('click', closeMenu);
}

// 关闭菜单的函数
function closeMenu() {
    let menu = document.querySelector('.custom-menu');
    if (menu) menu.remove();
    document.removeEventListener('click', closeMenu);
}


function delFriend(id) {
    $.ajax({
        type: 'post',
        url: 'chat/delFriend',
        contentType: "application/json",
        async: false,
        data: JSON.stringify({
            delId: id
        }),

        success: function (body) {
            let data = body.data;
            if (data == "") {

                console.log("删除好友");
            } else {
                console.log("删除失败");
            }
        },
        error: function (err) {
            if (err.status == 406) {

                location.href = "login.html";
                return;
            }
            console.log(result.message);
        }
    });
}

function delMsg(id) {
    $.ajax({
        type: 'post',
        url: 'chat/delMsg',
        contentType: "application/json",
        async: false,
        data: JSON.stringify({
            delId: id
        }),

        success: function (body) {
            let data = body.data;
            if (data == "") {
                console.log("删除成功");
            } else {
                console.log("删除失败");
            }
        },
        error: function (err) {
            if (err.status == 406) {

                location.href = "login.html";
                return;
            }
            console.log(result.message);
        }
    });
}
